<template>
  <div>
    <header-cmp>
      <span>提交订单</span>
    </header-cmp>
    <div>
        <h4>收货信息</h4>   
        <div class="addr"  @click="goPath">
          <div class="user">
              <div style="margin-right:5%">{{path.name}}</div>
              <div>{{path.tel}}</div>
          </div>
          <div class="addrs">
              <div style="color:red" v-if="path.isDefault">[默认]</div>
              <div style="margin-left:2%">{{path.province}}</div>
              <div style="margin-left:2%">{{path.city}}</div>
              <div style="margin-left:2%">{{path.county}}</div>
              <div style="margin-left:2%">{{path.addressDetail}}</div>
          </div>
        </div>
        <h4>支付方式</h4>
        <div class="zf">
          <van-radio-group v-model="radio">
            <van-radio name="wx">微信支付</van-radio>
            <van-radio name="zfb">支付宝支付</van-radio>
          </van-radio-group>
        </div>
        <div class="goods">
            <ul>
              <li v-for="i in goodsList" :key="i.id">
                  <div>
                    <img :src="i.img" />
                  </div>
                  <div class="goods-content">
                    <h3>{{i.name}}</h3>
                    <div class="goods-total">
                      <span>￥{{i.price}}</span>
                      <span>x{{i.num}}</span>
                    </div>
                  </div>
              </li>
            </ul>
        </div>
    </div>
    <div class="footer">
        <div class="money">
          <span>共</span>
          <b style="color:red">{{total.num}}</b>
          <span>件，</span>
          <span>总金额:</span>
          <em style="color:red">￥{{total.price}}</em>
        </div>
        <div class="dd" @click="getPayment">
          <span>提交订单</span>
        </div>
    </div>
  </div>
</template>

<script>
import HeaderCmp from '../components/HeaderCmp.vue'
import axios from 'axios'
import {Toast} from 'mint-ui'
import {mapState,mapMutations,mapGetters} from 'vuex'
import Qs from 'qs'
export default {
  data(){
    return{
      radio: 'zfb',
      path:{},
      total:{
        price:0,
        num:0
      },
      goodsList:[]
    }
  },
  computed:{
    ...mapGetters(['defaultPath']),
    ...mapState({
      token:state=>state.user.token,
      shopping:state=>state.shop.shopping,
      order_id:state=>state.order.order_id,
      list:state=>state.shop.list
    }),
  },
  created(){
    this.goodsList=JSON.parse(localStorage.getItem('shop'))
    axios({
        url:'/ajax/selectOrder',
        method:'post',
        data:{
            token:this.token,
            order_id:this.order_id
        }
    }).then(({data})=>{
        this.total={
          price:data.data.data[0].price,
          num:data.data.data[0].num
        }
    })
    if(localStorage.getItem('addr')){
      this.path=JSON.parse(localStorage.getItem('addr'))
    }else{
      axios({
          url:'/ajax/getAddress',
          method:'post',
          data:{
              token:this.token,
          }
      }).then(({data})=>{
          this.initData(data.data)
          if(this.defaultPath.length){
            this.path=this.defaultPath[0]
          }else{
            this.path=data.data[0]
          }
      })
    }

  },
  methods:{
    ...mapMutations(['initData']),
    //选择收获地址
    goPath(){
      this.$router.push({
        name:'ain',
        params:{
          type:'select'
        }
      })
    },
    getPayment(){
      //是否选择了收货地址
      if(!this.path) return Toast('请填写收货地址')
      axios({
          url:'/ajax/submitOrder',
          method:'post',
          data:{
              token:this.token,
              order_id:this.order_id,
              shopArr:this.list
          }
      }).then(({data})=>{
          let newArr = [];
          this.goodsList.forEach(e => {
            newArr.push(e.name)
          });
          let dataOrder={
            order_id:this.order_id,
            price:this.total.price,
            name:newArr.join(''),
            token:this.token
          }
          if(data.success){
            axios({
              url:'/ajax/payment',
              method:'post',
              headers:{
                'Content-Type': 'application/x-www-form-urlencoded'
              },
              //Qs可以增加安全性的序列化
              data:Qs.stringify(dataOrder)
            }).then(({data})=>{
              window.location.href=data.data.payUrl
            })
          }
      })
    }
  },
  components:{
    HeaderCmp

  }
}
</script>

<style lang='scss' scoped>
.footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  position: fixed;
  bottom: 5%;
  .dd{
    height: 40px;
    width: 20%;
    font-size: 15px;
    background-color: red;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.addr{
  border-bottom: 1px solid black;
  margin-bottom: 3%;
  padding: 5px;
  .user{
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 3%;
  }
  .addrs{
      display: flex;
      align-items: center;
  }
}
.van-radio-group{
  display: flex;
  margin-bottom: 3%;
}
.zf{

  border-bottom: 1px solid black;
}
.goods{
  display: flex;
  padding: 0.16rem 0.4rem;
  margin-top: 0.4rem;
  font-size: 0.426666rem;
  background-color: #FFFFFF;
  ul{
    width: 100%;
    li{
      width: 100%;
      display: flex;
      img{
        width: 74px;
        height: 74px;
      }
      .goods-content{
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;
        padding-left: 15px;
        .goods-total{
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>